<template>
  <div>
    <bread>
      <h1>纵向项目导入与审核 > 审核项目 > 审核详情</h1>
      <div class="pull-right">
        <el-button size="small" class="custom-button" plain @click="reject">退回</el-button>
        <el-button size="small" type="primary" @click="pass">通过审核</el-button>
      </div>
    </bread>
    <pageContent isCard>
      <h1>全球化时代生态正义的意识形态陷阱与破解进路研究</h1>
      <p>审核状态：<span class="warn-text">待审核</span></p>
      <div class="wrap">
        <ul class="list">
          <li class="item">
            <span class="label">研究类型：</span>
            <div class="content">
              社科类
            </div>
          </li>
          <li class="item">
            <span class="label">基金名称：</span>
            <div class="content">
              上海达尔文生态发展基金
            </div>
          </li>
          <li class="item">
            <span class="label">课题级别：</span>
            <div class="content">
              国家级
            </div>
          </li>
          <li class="item">
            <span class="label">资助类型：</span>
            <div class="content">
              面上
            </div>
          </li>
          <li class="item">
            <span class="label">项目成员：</span>
            <div class="content">
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="日期"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="地址">
                </el-table-column>
              </el-table>
            </div>
          </li>
        </ul>
      </div>
      <title-module title="学校审批意见"></title-module>
      <el-input
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 8}"
        placeholder="请输入审批意见"
        v-model="textarea3">
      </el-input>
    </pageContent>
  </div>
</template>

<script>

  import TitleModule from 'components/TitleModule';

  export default {
    data() {
      return {
        textarea3: null,
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ]
      }
    },
    components: {
      TitleModule
    },
    methods: {
      reject() {
        this.$confirm('确认退回后，该老师需修改后重新提交', '是否退回 王伟伟 的项目？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      pass() {
        this.$confirm('通过审核的项目，您可以在「项目管理」中查看与管理。', '审核通过', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success',
          showCancelButton: false,
        }).then(() => {
          this.$message({
            type: 'success',
            message: '审核成功，请继续审核!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>
<style scoped lang="scss">
  .list {
    background-color: #F9FAFC;
    padding: 10px 15px;
    margin-top: 10px;
    .item {
      display: table;
      margin-bottom: 10px;
      width: 80%;
      .label,
      .content {
        display: table-cell;
        vertical-align: top;
      }
      .label {
        min-width: 80px;
        width: 80px;
        max-width: 80px;
        color: #606266
      }
    }
  }
</style>
